<template>
    <el-dialog
      v-model="isShow"
      :title="title"
      width="80%"
      :close-on-click-modal="false"
      @close="handleClose"
    >
    <el-form :inline="true" :model="searchForm">
            <el-form-item>
              <el-input v-model="searchForm.username" clearable placeholder="请输入名称" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="searchForm.userId" clearable placeholder="请输入用户id" />
            </el-form-item>
            <el-form-item>
             <el-button type="primary" @click="getList()">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table
            v-loading="tableData.loading"
            ref="refTable"
            :data="tableData.list"
            :header-cell-style="tableData.headerCellStyle"
            stripe
            border
            size="small"
            style="width: 100%"
            max-height="250"
            >
            <el-table-column label="ID" prop="userId" />
            <el-table-column label="用户名" prop="username" />
            <el-table-column label="昵称" prop="nickname" />
            <el-table-column label="操作" width="80">
              <template #default="scope">
                <el-button
                  size="small"
                  type="primary"
                  text
                  @click="handleSelect(scope.row)"
                >选择</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            size="small"
            :current-page="pageData.current"
            :page-size="pageData.size"
            :page-sizes="pageData.pageSizes"
            :total="pageData.total"
            background
            layout="total, prev, pager, next"
            @current-change="getList"
            @size-change="sizeChange"
          />
  
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import {ElMessage, ElMessageBox} from 'element-plus'
  import { ref, reactive, inject, getCurrentInstance, ComponentInternalInstance } from 'vue';
  const {proxy} = getCurrentInstance() as ComponentInternalInstance;
  let optionData:any = inject('optionData'); 
  const emit = defineEmits(['confirm']);
  let isShow = ref(false);
  let title = ref('选择会长');
  let row:any = reactive({});
  let searchForm = reactive(
    {username: null}
  );
  let tableData = reactive({
    loading: true,// 加载
    list: [],// 表格数据
    cellStyle: { textAlign: 'center' },
      headerCellStyle: {
          background: 'var(--el-table-row-hover-bg-color)',
          color: 'var(--el-text-color-primary)',
      },
    select: [],
  });
  let pageData = reactive({
    pageNum: 1,
    pageSize: 10,
    pageSizes: [10,15,30,50,100],
    total: 0
  });
  const init = (t = '选择会长') => {
    isShow.value = true;
    title.value = t;
    getList();
  };
  const getList = (page:number = 1) => {
      let params = {
        current: page,
        size: pageData.pageSize,
        isMembers: 1,
      };
      params = Object.assign({}, params, searchForm);
      tableData.loading = true;
      return new Promise((resolve, reject) => {
        proxy.$request('get', '/admin/appuser/page', params, (data:any,msg:any) => {
          if(data.records.length > 0){
            tableData.list = data.records;
          }
          pageData.total = data.total;
          tableData.loading = false;
          resolve(list);
        })
      })    
    };
    const sizeChange = (val:number) => {
      pageData.pageSize = val;
      getList(pageData.pageNum);
    };
  const handleSelect = (row) => {
    emit('confirm', row);
    isShow.value = false;
  }
  const handleClose = () => {
    
  }
  
  defineExpose({
    init,
  })
  </script>
  
  <style>
  
  </style>